import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getChannelListCreator, setCurrent } from "./store/action/channel";
import { getNewsListCreator } from "./store/action/news";
import defImgSrc from './assets/defaultCover.jpg'
export default function App() {
  return (
    <>
      {/* 头部频道 */}
      <Header />
      {/* 文章列表 */}
      <Main />
    </>
  );

  function Main() {
    const { current } = useSelector(state => state.channel)
    const dispatch = useDispatch()
    useEffect(() => {
      dispatch(getNewsListCreator(current))
    }, [current, dispatch])
    const { list } = useSelector(state => state.news)
    console.log(list);
    return <div className="list">
      {list.map(item => {
        return (
          <div className="article_item" key={item.art_id}>
            <h3 className="van-ellipsis">{item.title}</h3>
            <div className="img_box">
              <img src={item.cover.images ? item.cover.images[0] : defImgSrc} className="w100" alt="" />
            </div>
            <div className="info_box">
              <span>{item.aut_name}</span>
              <span>{item.comm_count}评论</span>
              <span>{item.pubdate}</span>
            </div>
          </div>
        )
      })}
    </div>;
  }

  function Header() {
    const dispatch = useDispatch()
    const { list, current } = useSelector(state => state.channel)
    // console.log(list);
    useEffect(() => {
      dispatch(getChannelListCreator())
      // 🔔 dispatch是Object数据类型，引用地址。一直没变，相当于挂载后之后执行一次
    }, [dispatch])

    return <ul className="category">
      {list.map((item) => {
        return (
          <li onClick={() => dispatch(setCurrent(item.id))} className={item.id === current ? "select" : ''} key={item.id}>{item.name}</li>
        )
      })}
      {/* <li className="select">推荐</li>
      <li>html</li>
      <li>开发者资讯</li>
      <li>c++</li>
      <li>css</li>
      <li>数据库</li>
      <li>区块链</li>
      <li>go</li>
      <li>产品</li>
      <li>后端</li> */}
    </ul>;
  }
}
